<template>
    <a-card hoverable :style="{ width: '360px', marginBottom: '20px' }">
        <div :style="{display: 'flex',alignItems: 'center',justifyContent: 'space-between',}">
          <span :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }">
            <a-avatar :style="{ marginRight: '8px', backgroundColor: '#165DFF' }" :size="28">
              <img :src="userVO.userAvatar ?? myAvatar">
            </a-avatar>
            <a-typography-text>{{userVO.userName ?? '无名'}}</a-typography-text>
          </span>
          个人简介：{{userVO.userProfile ?? '暂无'}}
        </div>
    </a-card>
</template>

<script setup lang="ts">
    import {myAvatar} from '@/constant/photo';

    interface Props{
        userVO:API.UserVO
    }

    const props = withDefaults(defineProps<Props>(),{
        userVO:() =>{
            return {};
        }
    })
</script>

<style scoped>

</style>